﻿<%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %>

<asp:Content ID="indexTitle" ContentPlaceHolderID="TitleContent" runat="server">
    刘冬 ASP.NET MVC
</asp:Content>

<asp:Content ID="indexContent" ContentPlaceHolderID="MainContent" runat="server">

<link rel="stylesheet" type="text/css" href="/Content/flexigrid.css" />
<link rel="stylesheet" type="text/css" href="/Content/ui.all.css" />
<link rel="stylesheet" type="text/css" href="/Content/jquery.alerts.css" />
<link rel="stylesheet" type="text/css" href="/Content/jquery.flexbox.css" />

<script language="javascript" type="text/javascript" src="/Scripts/jquery.js"></script>
<script language="javascript" type="text/javascript" src="/Scripts/flexigrid.js"></script>
<script language="javascript" type="text/javascript" src="/Scripts/jquery.ui.custom.js"></script>
<script language="javascript" type="text/javascript" src="/Scripts/jquery.form.js"></script>	
<script language="javascript" type="text/javascript" src="/Scripts/jquery.alerts.js"></script>	
<script language="javascript" type="text/javascript" src="/Scripts/jquery.flexbox.js"></script>	

<script language="javascript" type="text/javascript">
    var CompanyShow = false;

    function ComboboxShow() {
        if (!CompanyShow) {
            $('#Company').flexbox("/Home/GetCompany/", {
                allowInput: false,
                paging: true,
                maxVisibleRows: 5,
                width: 150,
                method: 'POST',
                onSelect: function() {
                    $("#companyID").val() = this.getAttribute('hiddenValue');
                }
            });
            CompanyShow = true;
        }
    }
    
    function call(com, grid) {
        switch (com) {
            case '添加':
                if ($('#dialog').dialog('open')) {
                    $("#saveUser").resetForm();
                    ComboboxShow();
                }
                break;
            case '修改':
                var row = $('.trSelected', grid);
                if (row.length == 0) {
                    jAlert("请选择一条记录", "确定");
                    return;
                }
                if (row.length > 1) {
                    jAlert("抱歉只能同时修改一条", "确定");
                    return;
                }

                $("#userID").val($('.trSelected td:nth-child(1)', grid)[0].value);  //用户编号

                $("#name").val($('.trSelected td:nth-child(2)', grid)[0].value);  //姓名
                $("#age").val($('.trSelected td:nth-child(3)', grid)[0].value);  //年龄
                $("#sex").val($('.trSelected td:nth-child(4)', grid)[0].value);  //性别
                
                if ($('#dialog').dialog('open')) {
                    ComboboxShow();
                }
                
                break;

            case '删除':

                if ($('.trSelected', grid).length == 0) {
                    jAlert("请选择一条记录", "确定");
                    return;
                }
                var arr = new Array(0);
                $('.trSelected td:nth-child(1) div', grid).each(function(i) {//主要的一行，遍历选中行对象，获取值
                    var ss = $(this);
                    arr.push($(this).text());

                });
                jConfirm("是否删除您选中的" + arr.length + "记录", "选择", function(r) {
                    if (r) {
                        var parm = { list: arr };
                        $.ajax({
                            type: "POST",
                            url: "Home/Delete",
                            data: $.param(parm),
                            success: function(msg) {
                                $("#gridDemo").flexReload({});
                                jAlert("删除成功", "确定");
                            }
                        });
                    }
                });

                break;

            case '导出Excel':
                window.open("UserReport.xls");
                break;
        }

    }

    $(document).ready(function() {


        $("#gridDemo").flexigrid
			    ({
			        url: '/Home/GetGrid/',
			        dataType: 'json',
			        colModel: [
				    { display: '用户编号', name: 'UserID', width: 60, sortable: true, align: 'center', hide: true },
				    { display: '用户姓名', name: 'Name', width: 180, sortable: true, align: 'center' },
				    { display: '年龄', name: 'Age', width: 80, sortable: true, align: 'right' },
				    { display: '性别', name: 'Sex', width: 80, sortable: true, align: 'left',
				        render: function(cell, row, data, index) {
				            return cell ? "男" : "女";
				        }
				    }
				    ],
			        buttons: [
				    { name: '添加', bclass: 'add', onpress: call },
	        	    { separator: true },
	        	    { name: '修改', bclass: 'add', onpress: call },
	        	    { separator: true },
	        	    { name: '删除', bclass: 'delete', onpress: call },
				    { separator: true },
				    { name: '导出Excel', bclass: 'add', onpress: call },
				    { separator: true }
				    ],
			        searchitems: [
				    { display: '用户编号', name: 'UserID' },
				    { display: '用户姓名', name: 'Name', isdefault: true },
				    { display: '性别', name: 'Sex' },
				    { display: '年龄', name: 'Age' }
				    ],
			        sortname: "UserID",
			        sortorder: "desc",
			        usepager: true,  //使用分页(默认true) 
			        title: '用户列表',
			        striped: true,  //隔行变色(默认true) 
			        useRp: true,
			        novstripe: false,  //显示条纹 (默认true) 
			        resizable: true,  //可调整table大小(默认true)
			        rp: 15,
			        rpOptions: [10, 15, 20, 25, 40], //可选择设定的每页结果数 
			        showTableToggleBtn: true,
			        width: 700,
			        height: 200,
			        pagestat: '当前显示记录 {from} 到 {to} 条，共 {total} 条记录',
			        procmsg: '正在处理，请稍等 ...',
			        nomsg: '找不到符合条件的资料！',
			        errormsg: '连接错误！'
			    });

        var name = $("#name"),
			sex = $("#sex"),
			age = $("#age"),
			allFields = $([]).add(name).add(age),
			tips = $("#validateTips");

        function updateTips(t) {
            tips.text(t).effect("highlight", {}, 1500);
        }

        function checkLength(o, n, min, max) {

            if (o.val().length > max || o.val().length < min) {
                o.addClass('ui-state-error');
                updateTips("长度 " + n + " 必须在 " + min + " 到 " + max + "位之间。");
                return false;
            } else {
                return true;
            }

        }

        function checkRegexp(o, regexp, n) {

            if (!(regexp.test(o.val()))) {
                o.addClass('ui-state-error');
                updateTips(n);
                return false;
            } else {
                return true;
            }

        }

        $("#dialog").dialog({
            bgiframe: true,
            autoOpen: false,
            height: 300,
            modal: true,
            buttons: {

                "取消": function() {
                    $(this).dialog('close');
                },

                '保存': function() {
                    var bValid = true;
                    allFields.removeClass('ui-state-error');

                    bValid = bValid && checkLength(name, "用户名", 2, 16);
                    bValid = bValid && checkLength(age, "年龄", 1, 2);

                    bValid = bValid && checkRegexp(name, /^[a-z]([0-9a-z_])+$/i, "帐号仅能由a-z字母加0-9和_组成，且必须由字母开头");
                    bValid = bValid && checkRegexp(age, /^\d+$/i, "请输入100以内的整数");

                    //验证通过
                    if (bValid) {
                        var fm = $("#saveUser");
                        //提交表单  result为返回的数据，success为成功,form为提交的form
                        fm.ajaxSubmit(function(result, success, form) {
                            if (success = "success") {
                                fm.resetForm();
                                $("#dialog").dialog('close');
                                $("#gridDemo").flexReload({});
                                jAlert("成功", "确定");
                            }
                            else {
                                $("#dialog").dialog('close');
                                jAlert("失败", "确定");
                            }
                        });

                    }
                }

            },
            close: function() {
                allFields.val('').removeClass('ui-state-error');
            }
        });



    });

</script>

    
    <table id="gridDemo" style="display:none"></table>
          
    <div id="dialog" title="建立新用户" style="display:none;">
    
	    <p id="validateTips">请填写下列表单</p>

	    <form action="/Home/Save" id="saveUser" method="post">
	        <fieldset>
	            <table>
	                <tr>
	                    <td><label for="name">姓名：</label><input type="hidden" name="user.UserID" id="userID" /></td>
		                <td><input type="text" name="user.Name" id="name" class="text ui-widget-content ui-corner-all" /></td>
		            </tr>
		            <tr>
		                <td><label>性别：</label></td>
		                <td>
		                    <select name="user.Sex" id="sex">
                                <option selected="selected" value="true">男</option>
                                <option value="false">女</option>
                            </select>
		                </td>
		            </tr>
		            <tr>
		                <td><label>公司：</label></td>
		                <td><div id="Company"></div><input type="hidden" id="companyID" name="user.CompanyID" value="1" /></td>
		            </tr>
		            <tr>
		                <td><label for="age">年龄：</label></td>
		                <td><input type="text" name="user.Age" id="age" value="" class="text ui-widget-content ui-corner-all" /></td>
		            </tr>
		        </table>
	        </fieldset>
	    </form>
	
    </div>

</asp:Content>
